跳至主要内容

axios

作者資料

原始 MD by 祐民

參考代碼

參考代碼

依賴套件

node.js yarn 套件

axios

前後分離好簡單​

YoMin Su

基礎環節​

這個是什麼東東？​

讓你可以在網頁，或是其他執行JS/TS的環境下，能發送RESTful請求的工具，若你學過XMLHttpRequest(XHR)或是Fetch(HTML5)，那它跟前面兩者有相同的效果，但更容易使用。

為什麼要學這個？​

在目前前後端分離的設計架構下，許多網頁在顯示資料時，並非是網頁本身儲存著資料，而是在瀏覽的當下，跟後端伺服器索取要顯示的內容，透過這樣的方法，使前後端能進行溝通，並讓雙方都專注在各自需要負責的部分，僅需溝通好內容如何定義即可。

相較於 XHR / Fetch 的好處？​

在使用上，axios相對於另外兩者，更容易使用，也更適合用於前端開發(需要額外寫的程式碼較少)，這部分細節將在實作環節時說明。

其他程式語言有這樣的東西嗎？​

有，因為這種類型的請求，其背後的原理，都是在實作RESTful架構的細節，因此不同的語言自然也會有對應設計好的方法可以使用。

LanguagePackage
Golang靠語言原生的 net/http 就可以
Java內建有 HttpClient 與 HttpRequest 物件可用
PythonRequests套件，pip install一下

實際來應用一下​

先建立一個標準的JS專案​

加入我們要使用到的 axios 套件​

來寫點東西吧！​

來抓一下中央氣象局提供的資料

中央氣象局-開放資料平台

點選左上角的「登入/註冊」，取得自己的授權碼​

將自己的授權碼紀錄下來，別分享給其他人​

來看看有哪些資料可以索取​

資料擷取API線上說明文件 地震資料

以最近有感的地震為例​

練習時間​

透過axios來實作一次

學長的範例​

kukina622/weather

建立 axios 實例​

參考資料

參考代碼-爬取地震資料

參考代碼

yarn init
yarn add axios
const axios = require('axios');

axios.get('https://opendata.cwb.gov.tw/api/v1/rest/datastore/E-A0015-001?Authorization=CWB-4C17F590-8B81-417B-8EA5-46C9DB077877&timeFrom=2023-03-01T00%3A00%3A00')
    /*
        .then((res) => {
            console.log(res);
            console.log("\n-------------");
           
            console.log(res.data);
        });
    
        */

    .then((res) => {
        console.log(res.data.records.Earthquake);
    });


總是會有要往同一個伺服器不斷送請求的時候，一直寫相同的網址有點麻煩...​

import axios from 'axios';

const api = axios.create({
  baseURL: 'https://www.google.com',
  timeout: 3000,
  headers: { 'Content-Type': 'application/json' },
  withCredentials: true,
});

api.get('/')
  .then((res) => console.log(res))
  .catch((err) => console.log(err));

在未來使用時可能會遇到的問題​

1. 後端能接受的資料格式不是JSON怎麼辦？​

這是個好問題，一般來說，axios 會幫我們把帶著Body的請求，內容以JSON的格式送出，但總有不吃JSON的時候，這時，可以參考官方文件的說明，裡面有提到如何送出『application/x-www-form-urlencoded』跟『multipart/form-data』兩種表單類型的方法。

也可以傳送上傳檔案喔，一樣在文件中有說明 連結點我：axios/axios

2. 在送出請求時，應該要連同Cookie一起過去，但卻沒有？！​

需要確定一下你的 axios 實例有沒有把 withCredentials 這個參數設定為true，預設是不會攜帶的，因此若是需要透過Cookie資料驗證身份的系統，請求這類型路由時，都會失敗。

但這會有另一個 CORS不能為『*』的問題就是了...

3. 我的功能一路寫下來，但執行順序好像有點問題...​

這是因為神奇的非同步在『正常工作』導致的，若我們不是以 async/await 的方式去設計方法的話，NodeJS就會幫我們把同步方法先執行完，再去把後面非同步的部分跑完，在使用上，需要注意這個小小的，但很重要的問題！

End of Lesson​

Bye~